<!-- 主体框架 -->
<template>
	<div style="height: 100%;">
		<el-container style="height: 100%;">
			<!-- 侧边栏 -->
			<el-aside :width="sideWide+'px'"
				style="background-color: rgb(26, 59, 50); height: 100%; box-shadow: 2px 0 6px #ccc;">
				<Aside :isCollapse="isCollapse" :logoShow="logoShow" :menus="user.menus" />
			</el-aside>


			<!-- 上边 -->
			<el-container>
				<el-header style="border-bottom: 1px solid #ccc;">
					<Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :pathName="pathName"
						:user="user" />
				</el-header>

				<!-- 中心主体 -->
				<el-main>
					<!-- 表示当前页面的子路由会在 <router-view> 里面展示 -->
					<router-view />
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script>
	import Aside from '@/components/Aside';
	import Header from '@/components/Header';
	export default {
		name: 'Home',
		components: {
			Aside,
			Header
		},
		created() {
			// 从后台获取最新的用户数据
			this.getUser();
		},
		methods: {
			// 点击收缩按钮触发收缩
			collapse() {
				this.isCollapse = !this.isCollapse
				if (this.isCollapse) {
					// 收缩
					this.logoShow = false
					this.sideWith = 64
					this.collapseBtnClass = 'el-icon-caret-right'
				} else {
					// 展开
					this.logoShow = true
					this.sideWith = 200
					this.collapseBtnClass = 'el-icon-caret-left'
				}
			},
			getUser() {
				let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : ""
				this.user = username
			}
		},

		data() {
			return {
				collapseBtnClass: 'el-icon-caret-left',
				isCollapse: false,
				sideWith: 200 + 'px',
				logoShow: true,
				user: {}
			}
		}
	}
</script>

<style>

</style>
